<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p {
            width: 100px;
            height: 100px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi voluptate minima deleniti ullam corporis, sed laborum impedit soluta expedita assumenda iste optio quidem, laboriosam rerum. Voluptates, iusto. Esse dolorum adipisci distinctio suscipit reiciendis illum, velit sint non nobis minima error voluptates optio voluptate ratione nulla ipsam consectetur blanditiis in repudiandae incidunt saepe aspernatur molestiae, natus commodi? Architecto rem quod, soluta iste at blanditiis eaque cum eveniet illo numquam vel excepturi assumenda sed, harum sit, distinctio iusto libero earum vitae placeat consectetur. Fugit odio ex quam cumque ipsum temporibus. Quo aut minima temporibus, quos voluptas quia voluptates maiores eveniet, officia id tempore molestias ipsum! Error nisi ratione fugit, facilis odit vitae? Exercitationem velit itaque reiciendis necessitatibus harum eligendi illum, saepe sapiente consequuntur ea sequi qui praesentium maxime neque sit nam odit, minima officiis nihil maiores provident laudantium. Culpa, repudiandae. Quod eos eaque vero nostrum asperiores nulla a dolorem non minus possimus consequuntur amet aspernatur commodi ab nobis mollitia, numquam quasi praesentium alias! Assumenda quae iusto, eaque qui facere deserunt dolorum. Sit molestiae quae doloribus dignissimos atque consequuntur illo aliquam harum! Quaerat illo commodi corporis accusantium voluptatum? Et maxime, quae nesciunt sit quibusdam facere nisi deleniti esse nihil reprehenderit laboriosam aut inventore hic quam quas laudantium porro voluptas possimus dolorum sint ducimus, labore dicta autem dolores. Ducimus optio nulla commodi dolore consectetur quia nihil iusto laboriosam. Repellat, adipisci libero voluptatibus cum at numquam consectetur tempora provident, quod eaque est. Esse consequuntur molestias, quo alias assumenda expedita deserunt repellendus quis, minima a vitae maiores dolore maxime accusantium ducimus aliquam quasi consectetur eveniet in. Minima voluptate aliquam accusamus. Aut, earum cumque. Iste libero dicta laboriosam similique nobis totam laudantium in tenetur sapiente, aliquam ducimus rerum quisquam fugiat porro aliquid saepe explicabo eaque ullam ratione optio quam, accusamus delectus. Culpa, consectetur natus. Velit magnam nobis iusto ratione facilis sequi eius hic voluptates nihil, et quod dignissimos nam, labore quis delectus! Facilis cupiditate perferendis accusantium fugiat? Dolores minus laboriosam ratione. Quas velit reprehenderit quos totam dignissimos hic animi harum consectetur nulla blanditiis, maxime iste ex quam beatae obcaecati quo ipsam. Quos quibusdam rerum adipisci perspiciatis hic magni temporibus provident enim, excepturi ipsa modi architecto. Quo explicabo, consectetur quae beatae laborum accusantium nulla id mollitia unde voluptas similique voluptatibus ratione sit a minima aliquid alias? Voluptate cumque placeat optio molestiae saepe iste doloribus sapiente sint qui ad nesciunt porro, magni ea repudiandae itaque ducimus, omnis, voluptatibus reiciendis ipsam. Sequi cumque illo aperiam ducimus, inventore, nisi magnam facilis non rerum dignissimos atque, debitis eveniet voluptatibus maiores sunt voluptates voluptatum optio expedita tempore? Nisi repellendus excepturi quibusdam eius culpa inventore vero, veritatis suscipit quae delectus mollitia esse a expedita provident, doloremque maxime sint accusamus cumque, modi repudiandae. Modi ex quas officiis doloribus laboriosam adipisci veniam voluptatum voluptatibus cumque. Pariatur minima optio eligendi nisi nihil, excepturi et deleniti molestias culpa minus nemo! Neque voluptas molestias quidem voluptatem dolorem eius quaerat sunt commodi repudiandae est sequi aspernatur ipsum magnam ratione hic error blanditiis omnis praesentium maxime quia eligendi, quae asperiores nulla! Excepturi delectus impedit ut quisquam corrupti illo aliquid perspiciatis aperiam voluptatibus odit earum illum qui dolorum quae dolores quam ex minima, error dicta, accusantium voluptas officia veniam. Assumenda, veritatis officia eaque reiciendis, voluptatum at ad explicabo commodi suscipit inventore quia et, vero sunt! Hic numquam dolorum impedit iste eligendi ex laudantium, soluta debitis blanditiis et, at cupiditate sit sint dignissimos obcaecati cum vero enim veritatis. Sapiente modi architecto quibusdam, praesentium minus suscipit excepturi laboriosam placeat cupiditate sequi deleniti, doloribus inventore debitis, quo nihil. Quidem dolorum omnis aperiam. Ea obcaecati perferendis eum. Ipsam quibusdam neque blanditiis, quas esse dolorum. Laboriosam sit ad minima ipsa cum architecto eos beatae ratione vitae vel totam a, maiores consectetur, quis recusandae pariatur facilis. Sunt ut eveniet nulla eaque delectus tenetur nam laboriosam quae commodi iure alias deleniti, amet vero veritatis sequi autem voluptatibus ullam, molestiae quibusdam harum totam, deserunt voluptatem quo. Praesentium odit omnis debitis adipisci molestias necessitatibus in. Neque, expedita odit dolores accusamus, praesentium dignissimos et velit, rem deleniti atque officiis officia! Ipsam at doloremque animi veniam blanditiis totam praesentium nihil perferendis! Nemo maxime quam tempora dolorem, voluptates atque sint aspernatur quas minima modi consectetur nobis ratione praesentium fugiat, aut quaerat! Omnis nostrum ex provident fuga, et iusto dolore, aliquam quisquam labore blanditiis sed! Earum dolores error in, sequi id culpa amet perspiciatis ipsum vitae ratione iure sit eum rem enim, reprehenderit nostrum odit minima dolore. Officiis magni ratione vel aut itaque sint assumenda dolorum tempore illum consectetur distinctio perspiciatis, molestiae ducimus doloremque quis? Odit magni numquam temporibus sequi. Temporibus accusantium praesentium deserunt ad commodi assumenda numquam illo eveniet alias maxime amet magnam doloremque aperiam voluptate cumque ipsum ea qui, deleniti voluptatem harum earum, hic totam vel fugit! Cum eum a vitae! Aliquam illum magnam cum, perferendis hic temporibus nam officiis accusamus facilis alias veniam autem nulla ipsa quas modi velit voluptas iure molestiae dolore incidunt laborum asperiores id fugiat assumenda! Praesentium animi aspernatur voluptas, laudantium nostrum amet quam earum? Reprehenderit, iure ea maxime quas delectus aperiam exercitationem unde quae magnam atque eum ex rem modi expedita deleniti deserunt doloremque non quidem laborum minima doloribus! Dignissimos labore repellendus praesentium modi incidunt omnis maxime. Aliquid consequuntur voluptates rem doloribus natus non nesciunt quos iusto quod illo, expedita in ipsum fugit quisquam ducimus modi ut, vero eum, eveniet nemo consequatur consectetur delectus optio. Incidunt, est fuga, deleniti et repellendus hic odio obcaecati, quod quaerat dolorum odit veniam quibusdam mollitia dignissimos? Nobis voluptatibus ipsam eveniet aliquid! Dolores non asperiores porro illo doloremque optio aspernatur quas in maxime ut. Explicabo ducimus dolores facere laboriosam distinctio voluptatem quam sint. Vero sed maxime rem, quasi ipsa tenetur dolorem distinctio debitis vel velit necessitatibus ex laborum cum magni porro cumque magnam nam reiciendis corporis iste repellendus ullam! Animi fuga perferendis facilis quo nostrum, praesentium error assumenda possimus neque nemo, sequi deserunt molestiae maiores officia reprehenderit nesciunt repellendus? Totam sapiente debitis officiis asperiores, in quisquam fugit vero harum consequuntur adipisci, atque quasi labore quam! Quibusdam, ducimus repellat sint modi pariatur commodi dolor.
    </p>
    <div>
        <button>回到顶部</button>
        <button>到底部</button>
    </div>
    <script>
        // window.onscroll = function(){
        //     console.log(document.documentElement.scrollTop + document.body.scrollTop);
        // }
        var p = document.querySelector("p");
        p.onscroll = function() {
            console.log(this.scrollTop, this.scrollLeft);
        }

        document.getElementsByTagName("button")[0].onclick = function() {
            p.scrollTop = 0;
            p.scrollLeft = 0;
        }

        document.getElementsByTagName("button")[1].onclick = function() {
            p.scrollTop = p.scrollHeight;
            p.scrollLeft = p.scrollWidth;
        }
    </script>
</body>

</html>
